<template>
    <div style="overflow: auto;height: 100%;width: 100%">
        <div id="header">
            <div style="background-color: #8f000b; height: 110px;">
                <span style="width: 50%;height:100%;" ><img src="../../../static/img/scgsxy_logo.png" style="float: left; height:40%;padding: 2% "/></span>
                <span style="width: 50%;height:100%;" ><img src="../../../static/img/pkucloud1h100.png" style="float: right;height:50%;"/></span>
            </div>
            <div class="app1">
                <el-menu :default-active="active" class="el-menu-demo" mode="horizontal" active-text-color="#8f000b">
                    <el-menu-item style="width: 7rem  ;" index="1"><router-link :to="{name:'Home-page'}">首页</router-link></el-menu-item>
                    <el-menu-item style="width: 7rem ; " index="2"><router-link :to="{name:'Competition-dynamics'}">竞赛动态</router-link></el-menu-item>
                    <el-menu-item style="width: 7rem  ;" index="3"><router-link :to="{name:'Success-competition'}">竞赛佳绩</router-link></el-menu-item>
                    <el-menu-item style="width: 7rem  ;" index="7"><router-link :to="{name:'About-us'}">获奖名单</router-link></el-menu-item>
                    <el-menu-item  index="4" style="float: right; margin: auto 0;" v-if="!show_ind">
                        <router-link :to="{name:'Land'}"><el-button type="primary" plain @click="toLand">登录</el-button></router-link>
                        <router-link :to="{name:'Registe'}"><el-button type="danger" plain @click="toRegiste">注册</el-button></router-link>
                    </el-menu-item>
                    <!-- 已登录组件 -->
                    <el-submenu index="6" style="float: right; " v-if="show_ind">
                        <template slot="title">欢迎您！{{schoolNum}}</template>
                        <el-menu-item index="6-1"  style="width: 20px"><router-link :to="{name:'PersonalInfo'}">设置</router-link></el-menu-item>
                    </el-submenu>
                    <el-submenu index="5" style="float: right;" v-if="show_ind">
                        <template slot="title">我的</template>
                        <el-menu-item index="5-1" style="width: 10px"><router-link :to="{name:'Mygame'}">比赛</router-link></el-menu-item>
                        <el-menu-item index="5-2"  style="width: 10px"><router-link :to="{name:'Personal-achievement'}">获奖</router-link></el-menu-item>
                    </el-submenu>
                    <el-menu-item index="4" style=" float: right;" v-if="show_ind "><el-button type="danger" plain @click="logout" >退出</el-button></el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="app2">
            <!-- 轮播图 -->
            <template>
                <div class="block">
                    <el-carousel height="400px">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <img src="../../../static/img/baidu_lq_zp_banner.jpg" style="width: 100%; height: 400px;">
                            <!--<img src="../../../static/img/match_pic8.jpg" style="width: 100%; height: 400px;">-->
                            <!--<img src="../../../static/img/match_pic7.jpg" style="width: 100%; height: 400px;">-->
                            <!--<img src="../../../static/img/match_pic6.png" style="width: 100%; height: 400px;">-->
                            <!--<img src="../../../static/img/match_pic5.jpg" style="width: 100%; height: 400px;">-->
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </template>
            <!-- 分割线 -->
            <div style="height: 10px;"></div>
            <!-- 显示内容 -->
            <div style="margin: 0 10%">
                <!--登录模块-->
                <div style="width: 315px; height: 300px; border: 1px solid #20a0ff; border-radius: 6px; float: left;">
                    <div style="text-align: left; padding-left: 10px; width: auto; height: 40px; line-height: 40px; background-color: #20a0ff;">
                        <a href="#"> 登录>></a>
                    </div>
                    <div style="font-size: 12px; color: #20a0ff; margin-top: 30px;">
                        <p>以学生的身份登录</p>
                        <p>以管理员身份登录</p>
                    </div>
                    <div style="font-size: 15px; margin-top: 50px; margin-left: 10px; text-align: left;">
                        使用说明：<br>
                        1.balabalabala<br>
                        2.balabalabala
                    </div>
                </div>
                <!--最新竞赛模块-->
                <div style="width: 400px; height: 300px; border: 1px solid #20a0ff; border-radius: 6px; float: left; margin: 0 20px;">
                    <div style="text-align: left; padding-left: 10px; width: auto; height: 40px; line-height: 40px; background-color: #20a0ff;">
                        <a href="#">最新竞赛>></a>
                    </div>
                    <div>
                        <h2 style="margin-top: 30px;">2018年全国ACM大赛</h2>
                        <div style="margin: 50px; text-align: justify;">
                            <p style="font-size: 15px;">比赛时间：暂定于X月X日<br>比赛地点:计算机楼XXX教室<br><br></p>
                            <a style="font-size: 12px; color: #606266;" href="#">[详细]</a>
                        </div>
                    </div>
                </div>
                <!--获奖名单模块-->
                <div style="width: 315px; height: 300px; border: 1px solid #20a0ff; border-radius: 6px; float: right;">
                    <div style="text-align: left; padding-left: 10px; width: auto; height: 40px; line-height: 40px; background-color: #20a0ff;">
                        <a href="#"> 获奖名单>></a>
                    </div>
                    <div style="margin: 40px; text-align: justify; letter-spacing: 5px; line-height: 30px;">
                        <h4>一等奖：</h4>
                        <p>张三，李四</p>
                        <h4>二等奖：</h4>
                        <p>王五，陈六</p>
                        <h4>三等奖：</h4>
                        <p>某某，某某，某某</p>
                    </div>
                </div>
                <!--最新动态模块-->
                <div style="margin-top: 20px; width: 735px; height: 400px; border: 1px solid #20a0ff; border-radius: 6px; float: left;">
                    <div style="text-align: left; padding-left: 10px; width: auto; height: 40px; line-height: 40px; background-color: #20a0ff;">
                        <a href="#"> 最新动态>></a>
                    </div>
                    <div class="dt1">
                        <a href="#"> <img src="../../assets/xinxi2.jpg" class="img2"></a>
                        <div style="font-size: 15px;text-align: justify; letter-spacing: 3px; line-height: 30px;">
                            <p>第十四届“博创杯”全国大学生嵌入式设计大赛我校学生喜获佳绩.</p><br>
                            <a href="#">[详细]</a>
                        </div>
                    </div>
                    <div class="dt1">
                        <a href="#"> <img src="../../assets/xinxi.jpg" class="img2"></a>
                        <div style="font-size: 15px;text-align: justify; letter-spacing: 3px; line-height: 30px;">
                            <p>计算机与软件学院在首届中国高校计算机大赛——微信小程序应用开发大赛喜获二等奖</p><br>
                            <a href="#">[详细]</a>
                        </div>
                    </div>

                </div>
                <!--竞赛信息-->
                <div style="margin-top: 20px; width: 315px; height: 400px; border: 1px solid #20a0ff; border-radius: 6px; float: right;">
                    <div style="text-align: left; padding-left: 10px; width: auto; height: 40px; line-height: 40px; background-color: #20a0ff;">
                        <a href="#"> 竞赛信息>></a>
                    </div>
                    <div style="margin-top: 20px;">
                        <a class="xinxi" href="#">1.关于举办2018年ACM大赛<br></a>
                        <a class="xinxi" href="#">2.关于计算机程序设计大赛<br></a>
                        <a class="xinxi" href="#">3.关于计算机应用能力大赛<br></a>
                        <a class="xinxi" href="#">4.关于2018年软件设计大赛<br></a>
                    </div>
                </div>
                <!--获奖作品模块-->
                <div style="margin-top: 20px; width: 1080px; height: 400px; border: 1px solid #20a0ff; border-radius: 6px; float: left;">
                    <div style="text-align: left; padding-left: 10px; width: auto; height: 40px; line-height: 40px; background-color: #20a0ff;">
                        <a href="#"> 获奖作品>></a>
                    </div>
                    <div class="zp1">
                        <a href="#"> <img src="../../assets/zp.jpg" class="img1"></a>
                        <div style="font-size: 15px;text-align: justify; letter-spacing: 5px; line-height: 30px;">
                            作品名称：XXXX<br>
                            参赛选手：张XX<br>
                            团队成员：李XX，陈XX,王XX<br>
                            作品简介：XXXXXXXXXXX<br><br>
                            <a href="#">[详细]</a>
                        </div>
                    </div>
                    <div class="zp1">
                        <a href="#"> <img src="../../assets/zp.jpg" class="img1"></a>
                        <div style="font-size: 15px;text-align: justify; letter-spacing: 5px; line-height: 30px;">
                            作品名称：XXXX<br>
                            参赛选手：张XX<br>
                            团队成员：李XX，陈XX,王XX<br>
                            作品简介：XXXXXXXXXXX<br><br>
                            <a href="#">[详细]</a>
                        </div>
                    </div>
                    <div class="zp1">
                        <a href="#"> <img src="../../assets/zp.jpg" class="img1"></a>
                        <div style="font-size: 15px;text-align: justify; letter-spacing: 5px; line-height: 30px;">
                            作品名称：XXXX<br>
                            参赛选手：张XX<br>
                            团队成员：李XX，陈XX,王XX<br>
                            作品简介：XXXXXXXXXXX<br><br>
                            <a href="#">[详细]</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="footer1" style="padding: 0; background-color: white; z-index: -1;">
            <div id="_img" style="position: relative; height: 60px;">
                <div id="_img1" style="overflow: hidden;">
                    <ul><li>
                        <img src="../../../static/img/wave_01.png" style="animation: move_wave 80s infinite;">//1
                        <img  src="../../../static/img/wave_01.png" style="animation: move_wave 80s infinite;">
                    </li></ul>

                </div>
                <div id="_img2" style="overflow: hidden;">
                    <ul><li>
                        <img src="../../../static/img/wave_02.png" style="animation: move_wave 50s infinite;">
                        <img src="../../../static/img/wave_02.png" style="animation: move_wave 50s infinite;">
                    </li></ul>
                </div>

            </div>
            <div style="background-color: rgb(0,159,217);">
                <div style=" width: 80%; margin: 0 auto;">
                    <div class="fot-l"> 成都校区：四川省成都市郫都区团结镇学院街65号 邮编：611745<br>
                        眉山校区：眉山市眉州大道岷东段9号 邮编：620000<br>
                        联系电话&nbsp;&nbsp;&nbsp;&nbsp;招办：(028)87953080 校办:(028)87953896 人事处：(028)87953900 后勤处：(028)87953092<br>
                        Email：yb@stbu.edu.cn&nbsp;&nbsp; <br>
                        技术支持：四川工商学院1205
                    </div>
                    <div class="font-r">
                        <ul id="_footer_ul">
                            <li style="margin-left: 0;"> <span><img src="../../../static/img/weixin.jpg" width="100%" height="100%" ></span> <i>微信</i> </li>
                            <li> <span><img src="../../../static/img/QQ.jpg" width="100%" height="100%"></span> <i>QQ智慧校园</i> </li>
                            <li> <span><img src="../../../static/img/weibo.jpg" width="100%" height="100%"></span> <i>微博</i> </li>
                            <li> <span><img  src="../../../static/img/vr.png" width="100%" height="100%"></span> <i>VR工商</i> </li>
                        </ul>
                    </div>
                </div>
                <br>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //
                active:'',
                show_ind: false,
                schoolNum:'',
            }
        },
        methods: {
            toLand(){
                this.$router.push('/Land')
            },
            toRegiste() {
                this.$router.push( '/Registe' )
            },
            logout(){
                var storage=window.localStorage;
                storage.clear();
                if(!window.localStorage){
                    alert("浏览器支持localstorage");
                }else{
                    var storage=window.localStorage;
                    //第三种方法读取
                    this.schoolNum=storage.getItem("username");
                    console.log(this.schoolNum);
                    if(this.schoolNum==null)
                        this.show_ind=false;
                }
            },
        },
        mounted() {
            if (this.$route.name == 'Home-page') this.active = '1';
            if (this.$route.name == 'Competition-dynamics') this.active = '2';
        },
        created() {
            if(!window.localStorage){
                alert("浏览器支持localstorage");
            }else{
                var storage=window.localStorage;
                this.schoolNum=storage.getItem("username");
                console.log(this.schoolNum);
                if(this.schoolNum!=null)
                    this.show_ind=true;
            }
        }
    }


</script>
<style>
    .app1 {
        font-family: 微软雅黑;
        text-align: center;
        font-size: 13px;
        content: "黑体";
    }
    @keyframes move_wave {
        0% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(-30%);
        }
        100% {
            transform: translateX(0);
        }
    }
    #_img1 {
        height: 60px;
        width: 100%;
        position: absolute;
        z-index: 15;
    }
    #_img2 {
        height: 60px;
        width: 100%;
        position: absolute;
        z-index: 10;
    }
    #_img1>ul, #_img2>ul {
        padding: 0;
    }
    #_img1>ul>li, #_img2>ul>li {
        list-style-type: none;
    }
    #_footer_ul {
        list-style-type: none;
        padding: 0;
        margin: 10px 0;
        display: flex;
    }
    #_footer_ul li {
        list-style-type: none;
        width: 100px;
        height: 100px;
        margin: 0 10px;

    }
    .footer1{
        width: 100%;
        position: relative;
        top: 500px;
    }
    .app2 {
        font-family: Helvetica, sans-serif;
        text-align: center;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: whitesmoke;
    }

    .li h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .xinxi{
        border-bottom: 1px dashed;
        color: black;
        text-align: justify;
        letter-spacing: 5px;
        line-height: 30px;
    }
    .zp1{
        margin: 30px 0px 30px 30px;
        padding: 10px;
        width: 300px;
        height: auto;
        float: left;
        border: 1px dashed grey;
        border-radius: 10px;
    }
    .dt1{
        margin: 20px 30px;
        padding: 10px;
        width: 650px;
        height: auto;
        float: left;
        border: 1px dashed grey;
        border-radius: 10px;
    }
    .img1{
        width: 100px;
        height: 120px;
    }
    .img2{
        width: 100px;
        height: 100px;
        float: left;
        margin-right: 30px;
    }
    .img3{
        width: 100%;
        height: 400px;
    }
</style>

